M

MLOG

Türkçe

React'in reconciliation sürecinde ustalaşın. 'key' prop'unu doğru kullanarak liste render'ını optimize edin, hataları önleyin ve uygulama performansını artırın.

Performansın Kilidini Açmak: Liste Optimizasyonu için React Reconciliation Anahtarlarına Derinlemesine Bir Bakış

Modern web geliştirme dünyasında, veri değişikliklerine hızla yanıt veren dinamik kullanıcı arayüzleri oluşturmak esastır. React, bileşen tabanlı mimarisi ve bildirimsel doğasıyla bu arayüzleri oluşturmak için küresel bir standart haline gelmiştir. React'in verimliliğinin kalbinde, Sanal DOM'u içeren reconciliation (uzlaşma) adı verilen bir süreç yatar. Ancak, en güçlü araçlar bile verimsiz kullanılabilir ve hem yeni hem de deneyimli geliştiricilerin tökezlediği yaygın bir alan listelerin render edilmesidir.

Muhtemelen sayısız kez data.map(item => <div>{item.name}</div>) gibi bir kod yazmışsınızdır. Basit, hatta önemsiz gibi görünür. Ancak bu basitliğin altında, göz ardı edildiğinde yavaş uygulamalara ve kafa karıştırıcı hatalara yol açabilen kritik bir performans unsuru yatar. Çözüm mü? Küçük ama güçlü bir prop: key.

Bu kapsamlı rehber, sizi React'in reconciliation sürecine ve liste render'ında anahtarların vazgeçilmez rolüne derinlemesine bir yolculuğa çıkaracak. Sadece 'ne' olduğunu değil, 'neden' olduğunu da keşfedeceğiz—anahtarlar neden gereklidir, nasıl doğru seçilirler ve yanlış seçmenin önemli sonuçları nelerdir. Sonunda, daha performanslı, kararlı ve profesyonel React uygulamaları yazmak için gerekli bilgiye sahip olacaksınız.

Bölüm 1: React'in Reconciliation Sürecini ve Sanal DOM'u Anlamak

Anahtarların önemini takdir edebilmemiz için önce React'i hızlı kılan temel mekanizmayı anlamalıyız: Sanal DOM (VDOM) tarafından desteklenen reconciliation.

Sanal DOM Nedir?

Tarayıcının Belge Nesne Modeli (DOM) ile doğrudan etkileşim kurmak hesaplama açısından maliyetlidir. DOM'da bir şeyi her değiştirdiğinizde—bir düğüm eklemek, metni güncellemek veya bir stili değiştirmek gibi—tarayıcının önemli miktarda iş yapması gerekir. Tüm sayfa için stilleri ve düzeni yeniden hesaplaması gerekebilir; bu süreç reflow ve repaint olarak bilinir. Karmaşık, veri odaklı bir uygulamada, sık sık yapılan doğrudan DOM manipülasyonları performansı hızla düşürebilir.

React bu sorunu çözmek için bir soyutlama katmanı sunar: Sanal DOM. VDOM, gerçek DOM'un hafif, bellek içi bir temsilidir. Bunu kullanıcı arayüzünüzün bir planı gibi düşünebilirsiniz. React'e kullanıcı arayüzünü güncellemesini söylediğinizde (örneğin, bir bileşenin state'ini değiştirerek), React hemen gerçek DOM'a dokunmaz. Bunun yerine aşağıdaki adımları gerçekleştirir:

  1. Güncellenmiş durumu temsil eden yeni bir VDOM ağacı oluşturulur.
  2. Bu yeni VDOM ağacı, önceki VDOM ağacı ile karşılaştırılır. Bu karşılaştırma sürecine "diffing" denir.
  3. React, eski VDOM'u yenisine dönüştürmek için gereken minimum değişiklik setini hesaplar.
  4. Bu minimum değişiklikler daha sonra bir araya getirilir ve tek, verimli bir işlemle gerçek DOM'a uygulanır.

Reconciliation olarak bilinen bu süreç, React'i bu kadar performanslı yapan şeydir. React, tüm evi yeniden inşa etmek yerine, hangi tuğlaların değiştirilmesi gerektiğini hassas bir şekilde belirleyen, işi ve aksaklığı en aza indiren uzman bir müteahhit gibi davranır.

Bölüm 2: Anahtarsız Liste Render Etme Problemi

Şimdi, bu zarif sistemin nerede sorun yaşayabileceğini görelim. Kullanıcıların bir listesini render eden basit bir bileşen düşünün:


function UserList({ users }) {
  return (
    <ul>
      {users.map(user => (
        <li>{user.name}</li>
      ))}
    </ul>
  );
}

Bu bileşen ilk kez render edildiğinde, React bir VDOM ağacı oluşturur. `users` dizisinin *sonuna* yeni bir kullanıcı eklersek, React'in diffing algoritması bunu zarif bir şekilde halleder. Eski ve yeni listeleri karşılaştırır, sonda yeni bir öğe görür ve sadece gerçek DOM'a yeni bir `<li>` ekler. Verimli ve basit.

Peki ya listenin başına yeni bir kullanıcı eklersek veya öğeleri yeniden sıralarsak ne olur?

Diyelim ki başlangıç listemiz şu şekilde:

Ve bir güncellemeden sonra şu hale geliyor:

Herhangi bir benzersiz tanımlayıcı olmadan, React iki listeyi sıralarına (indekslerine) göre karşılaştırır. İşte gördüğü şey:

Bu inanılmaz derecede verimsizdir. React, en başa sadece "Charlie" için yeni bir eleman eklemek yerine, iki mutasyon ve bir ekleme işlemi gerçekleştirdi. Büyük bir liste için veya kendi state'ine sahip karmaşık bileşenler olan liste öğeleri için, bu gereksiz iş, önemli performans düşüşüne ve daha da önemlisi, bileşen state'i ile ilgili potansiyel hatalara yol açar.

İşte bu yüzden, yukarıdaki kodu çalıştırırsanız, tarayıcınızın geliştirici konsolunda bir uyarı görürsünüz: "Warning: Each child in a list should have a unique 'key' prop." React, size işini verimli bir şekilde yapabilmesi için yardıma ihtiyacı olduğunu açıkça söylüyor.

Bölüm 3: Kurtarıcı `key` Prop'u

`key` prop'u, React'in ihtiyaç duyduğu ipucudur. Eleman listeleri oluştururken sağladığınız özel bir dize (string) niteliğidir. Anahtarlar, her elemana yeniden render'lar arasında kararlı ve benzersiz bir kimlik verir.

`UserList` bileşenimizi anahtarlarla yeniden yazalım:


function UserList({ users }) {
  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

Burada, her `user` nesnesinin benzersiz bir `id` özelliğine sahip olduğunu varsayıyoruz (örneğin, bir veritabanından gelen). Şimdi, senaryomuza geri dönelim.

Başlangıç verisi:


[{ id: 'u1', name: 'Alice' }, { id: 'u2', name: 'Bob' }]

Güncellenmiş veri:


[{ id: 'u3', name: 'Charlie' }, { id: 'u1', name: 'Alice' }, { id: 'u2', name: 'Bob' }]

Anahtarlarla, React'in diffing süreci çok daha akıllıdır:

  1. React, yeni VDOM'daki `<ul>`'nin çocuklarına bakar ve anahtarlarını kontrol eder. `u3`, `u1` ve `u2`'yi görür.
  2. Ardından önceki VDOM'un çocuklarını ve anahtarlarını kontrol eder. `u1` ve `u2`'yi görür.
  3. React, `u1` ve `u2` anahtarlarına sahip bileşenlerin zaten var olduğunu bilir. Onları mutasyona uğratması gerekmez; sadece karşılık gelen DOM düğümlerini yeni pozisyonlarına taşıması gerekir.
  4. React, `u3` anahtarının yeni olduğunu görür. "Charlie" için yeni bir bileşen ve DOM düğümü oluşturur ve bunu en başa ekler.

Sonuç, tek bir DOM eklemesi ve biraz yeniden sıralamadır ki bu, daha önce gördüğümüz çoklu mutasyonlardan ve eklemeden çok daha verimlidir. Anahtarlar, React'in elemanları dizideki konumlarından bağımsız olarak render'lar arasında izlemesine olanak tanıyan kararlı bir kimlik sağlar.

Bölüm 4: Doğru Anahtarı Seçmek - Altın Kurallar

`key` prop'unun etkinliği tamamen doğru değeri seçmenize bağlıdır. Farkında olunması gereken net en iyi uygulamalar ve tehlikeli anti-pattern'ler vardır.

En İyi Anahtar: Benzersiz ve Kararlı ID'ler

İdeal anahtar, bir listedeki bir öğeyi benzersiz ve kalıcı olarak tanımlayan bir değerdir. Bu neredeyse her zaman veri kaynağınızdan gelen benzersiz bir ID'dir.

Anahtarlar için mükemmel kaynaklar şunları içerir:


// İYİ: Veriden gelen kararlı, benzersiz bir ID kullanmak.
<div>
  {products.map(product => (
    <ProductItem key={product.sku} product={product} />
  ))}
</div>

Anti-Pattern: Dizi İndeksini Anahtar Olarak Kullanmak

Yaygın bir hata, dizi indeksini anahtar olarak kullanmaktır:


// KÖTÜ: Dizi indeksini anahtar olarak kullanmak.
<div>
  {items.map((item, index) => (
    <ListItem key={index} item={item} />
  ))}
</div>

Bu, React uyarısını susturacak olsa da, ciddi sorunlara yol açabilir ve genellikle bir anti-pattern olarak kabul edilir. İndeksi anahtar olarak kullanmak, React'e bir öğenin kimliğinin listedeki konumuna bağlı olduğunu söyler. Bu, liste yeniden sıralanabildiğinde, filtrelenebildiğinde veya başına/ortasına öğeler eklendiğinde/kaldırıldığında hiç anahtar olmamasıyla temelde aynı sorundur.

State Yönetimi Hatası:

İndeks anahtarlarını kullanmanın en tehlikeli yan etkisi, liste öğeleriniz kendi state'lerini yönettiğinde ortaya çıkar. Bir girdi alanları listesi hayal edin:


function UnstableList() {
  const [items, setItems] = React.useState([{ id: 1, text: 'First' }, { id: 2, text: 'Second' }]);

  const handleAddItemToTop = () => {
    setItems([{ id: 3, text: 'New Top' }, ...items]);
  };

  return (
    <div>
      <button onClick={handleAddItemToTop}>Add to Top</button>
      {items.map((item, index) => (
        <div key={index}>
          <label>{item.text}: </label>
          <input type="text" />
        </div>
      ))}
    </div>
  );
}

Şu zihinsel egzersizi deneyin:

  1. Liste "First" ve "Second" ile render edilir.
  2. İlk girdi alanına ("First" için olan) "Merhaba" yazarsınız.
  3. 'Başa Ekle' düğmesine tıklarsınız.

Ne olmasını beklersiniz? "New Top" için yeni, boş bir girdi alanının görünmesini ve "First" için olan girdi alanının (hala "Merhaba" içeren) aşağı kaymasını beklersiniz. Gerçekte ne olur? İlk pozisyondaki (indeks 0) ve hala "Merhaba" içeren girdi alanı yerinde kalır. Ama şimdi yeni veri öğesi olan "New Top" ile ilişkilendirilmiştir. Girdi bileşeninin state'i (iç değeri), temsil etmesi gereken veriye değil, konumuna (key=0) bağlıdır. Bu, indeks anahtarlarının neden olduğu klasik ve kafa karıştırıcı bir hatadır.

`key={index}`'i `key={item.id}` olarak değiştirirseniz, sorun çözülür. React artık bileşenin state'ini verinin kararlı ID'si ile doğru bir şekilde ilişkilendirecektir.

İndeks Anahtarı Kullanmak Ne Zaman Kabul Edilebilir?

İndeks kullanmanın güvenli olduğu nadir durumlar vardır, ancak tüm bu koşulları sağlamalısınız:

  1. Liste statiktir: Asla yeniden sıralanmayacak, filtrelenmeyecek veya sonu dışında herhangi bir yerden öğe eklenip çıkarılmayacaktır.
  2. Listedeki öğelerin kararlı ID'leri yoktur.
  3. Her öğe için render edilen bileşenler basittir ve iç state'leri yoktur.

O zaman bile, mümkünse geçici ama kararlı bir ID oluşturmak genellikle daha iyidir. İndeks kullanmak her zaman varsayılan bir davranış değil, bilinçli bir seçim olmalıdır.

En Kötü Suçlu: `Math.random()`

Asla, ama asla `Math.random()` veya başka bir deterministik olmayan değeri anahtar olarak kullanmayın:


// KORKUNÇ: Bunu yapmayın!
<div>
  {items.map(item => (
    <ListItem key={Math.random()} item={item} />
  ))}
</div>

`Math.random()` tarafından oluşturulan bir anahtarın her render'da farklı olacağı garantidir. Bu, React'e önceki render'daki tüm bileşen listesinin yok edildiğini ve tamamen farklı bileşenlerden oluşan yepyeni bir listenin oluşturulduğunu söyler. Bu, React'i tüm eski bileşenleri unmount etmeye (state'lerini yok ederek) ve tüm yeni bileşenleri mount etmeye zorlar. Reconciliation amacını tamamen boşa çıkarır ve performans için mümkün olan en kötü seçenektir.

Bölüm 5: İleri Düzey Kavramlar ve Sıkça Sorulan Sorular

Anahtarlar ve `React.Fragment`

Bazen bir `map` geri aramasından birden çok eleman döndürmeniz gerekir. Bunu yapmanın standart yolu `React.Fragment` kullanmaktır. Bunu yaptığınızda, `key` doğrudan `Fragment` bileşeninin üzerine yerleştirilmelidir.


function Glossary({ terms }) {
  return (
    <dl>
      {terms.map(term => (
        // Anahtar çocuklara değil, Fragment'in üzerine konur.
        <React.Fragment key={term.id}>
          <dt>{term.name}</dt>
          <dd>{term.definition}</dd>
        </React.Fragment>
      ))}
    </dl>
  );
}

Önemli: Kısa yazım sözdizimi `<>...</>` anahtarları desteklemez. Listeniz fragment gerektiriyorsa, açık `<React.Fragment>` sözdizimini kullanmalısınız.

Anahtarların Sadece Kardeşler Arasında Benzersiz Olması Gerekir

Yaygın bir yanılgı, anahtarların tüm uygulamanızda global olarak benzersiz olması gerektiğidir. Bu doğru değildir. Bir anahtarın yalnızca kendi doğrudan kardeş listesi içinde benzersiz olması gerekir.


function CourseRoster({ courses }) {
  return (
    <div>
      {courses.map(course => (
        <div key={course.id}>  {/* Kurs için anahtar */} 
          <h3>{course.title}</h3>
          <ul>
            {course.students.map(student => (
              // Bu öğrenci anahtarının yalnızca bu kursun öğrenci listesi içinde benzersiz olması gerekir.
              <li key={student.id}>{student.name}</li>
            ))}
          </ul>
        </div>
      ))}
    </div>
  );
}

Yukarıdaki örnekte, iki farklı kursun `id: 's1'` olan bir öğrencisi olabilir. Bu tamamen normaldir çünkü anahtarlar farklı ebeveyn `<ul>` elemanları içinde değerlendirilmektedir.

Bileşen Durumunu Kasıtlı Olarak Sıfırlamak için Anahtarları Kullanma

Anahtarlar öncelikle liste optimizasyonu için olsa da, daha derin bir amaca hizmet ederler: bir bileşenin kimliğini tanımlarlar. Bir bileşenin anahtarı değişirse, React mevcut bileşeni güncellemeye çalışmaz. Bunun yerine, eski bileşeni (ve tüm çocuklarını) yok eder ve sıfırdan yepyeni bir tane oluşturur. Bu, eski örneği unmount eder ve yeni bir tane mount eder, böylece state'ini etkili bir şekilde sıfırlar.

Bu, bir bileşeni sıfırlamanın güçlü ve bildirimsel bir yolu olabilir. Örneğin, bir `userId`'ye göre veri çeken bir `UserProfile` bileşeni hayal edin.


function App() {
  const [userId, setUserId] = React.useState('user-1');

  return (
    <div>
      <button onClick={() => setUserId('user-1')}>View User 1</button>
      <button onClick={() => setUserId('user-2')}>View User 2</button>
      
      <UserProfile key={userId} id={userId} />
    </div>
  );
}

`UserProfile` bileşenine `key={userId}` yerleştirerek, `userId` her değiştiğinde tüm `UserProfile` bileşeninin atılacağını ve yenisinin oluşturulacağını garanti ederiz. Bu, önceki kullanıcının profilinden gelen (form verileri veya çekilen içerik gibi) state'in kalması gibi potansiyel hataları önler. Bileşen kimliğini ve yaşam döngüsünü yönetmenin temiz ve açık bir yoludur.

Sonuç: Daha İyi React Kodu Yazmak

`key` prop'u, bir konsol uyarısını susturmanın bir yolundan çok daha fazlasıdır. React'e, reconciliation algoritmasının verimli ve doğru çalışması için gereken kritik bilgiyi sağlayan temel bir talimattır. Anahtarların kullanımında ustalaşmak, profesyonel bir React geliştiricisinin ayırt edici özelliğidir.

Temel çıkarımları özetleyelim:

Bu ilkeleri içselleştirerek, sadece daha hızlı, daha güvenilir React uygulamaları yazmakla kalmayacak, aynı zamanda kütüphanenin temel mekaniklerini daha derinden anlayacaksınız. Bir dahaki sefere bir listeyi render etmek için bir dizi üzerinde map işlemi yaptığınızda, `key` prop'una hak ettiği önemi verin. Uygulamanızın performansı ve gelecekteki siz, bunun için size teşekkür edecektir.